<template>
  <div class="layout-container">
    <div class="box">
      <el-row :gutter="20">
        <el-col v-for="row in data" :key="row.id" :lg="8" :md="8" :sm="12" :xs="24">
          <Card
            :row="row"
            background="#fff"
            :thumb="row.thumb"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Card from './components/card.vue'
export default defineComponent({
  components: {
    Card
  },
  setup() {
    const data = [
      { id: 1, thumb:'http://blog.51weblove.com/wp-content/themes/2021062118010181/timthumb.php?src=http://blog.51weblove.com/wp-content/uploads/2018/12/2018120512375819.jpg&h=284&w=284&zc=1', name: '联系电话', des: '电话号码：176***9092', link: 'https://www.baidu.com/' },
      { id: 2, thumb:'http://blog.51weblove.com/wp-content/themes/2021062118010181/timthumb.php?src=http://blog.51weblove.com/wp-content/uploads/2018/12/2018120516354293.jpg&h=284&w=284&zc=1', name: '电子邮箱', des: '邮箱号：68***5057@qq.com', link: 'https://www.baidu.com/' },
      { id: 3, thumb:'http://blog.51weblove.com/wp-content/themes/2021062118010181/timthumb.php?src=http://blog.51weblove.com/wp-content/uploads/2018/12/2018120512374712.jpg&h=284&w=248&zc=1', name: '官网网址', des: '网站:http://ufutech.com/', link: 'http://ufutech.com/' },
      { id: 4, thumb:'http://img1.912688.com/1E5B8FA42C44F0BE82479117BAAD22DD.jpg?imageMogr2/gravity/NorthWest/crop/704x704/quality/90', name: '公司地址', des: '地点：成都某区XX大道xxxx号xx栋xx层xx号', link: 'http://ufutech.com/' }
    ]
    return {
      data
    }
  }
})
</script>

<style lang="scss" scoped>
  .box {
    padding: 15px;
    .el-col {
      margin-bottom: 15px;
    }
  }
</style>